<template>
	<view class="p_lr_32 p_over">
		<textarea :placeholder="des" placeholder-class="p_font_28 p_color_b2" class="p_font_28"
			v-model="formData.question"></textarea>
		<view class="p_font_28">上传图片<text class="p_font_24 p_color_b2 p_margin_l_16">最多3张</text></view>
		<view class="p_flex p_margin_t_28" style="margin-bottom: 128rpx;">
			<view class="img_wrapper jia" v-if="imgsList.length < 3" @click="getUpImage">
				<image src="https://dy.sykj365.com/uploads/mini/jia@2x.png"></image>
			</view>
			<view class="img_wrapper" v-for="(item, index) in imgsList" :key="index">
				<image :src="imgHost + item" mode="aspectFill" class="img" @click="getLook(imgsList, index)"></image>
				<image src="https://dy.sykj365.com/uploads/mini/cha@2x.png" class="cha" @click="getDelImg(index)"></image>
			</view>
		</view>
		<view class="p_btn" @click="getSubmit">
			<view>提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				des1: '请填写10字以上的描述，以便我们更好的处理您退款问题，感谢您的配合～',
				des2: '请填写10字以上的描述，以便我们为您提供更好的帮助，感谢您的配合～',
				des: '',
				imgsList: [],
				formData: {
					question: '',
					images: ''
				},
				imgHost: this.$api.yuming,
				id: '',
			}
		},
		onLoad(e) {
			uni.setNavigationBarTitle({
				title: e.type == 2 ? '建议反馈' : '申请退款'
			});

			this.des = e.type == 2 ? this.des2 : this.des1;

			if (e.id) this.id = e.id;
		},
		methods: {
			getUpImage() {
				let self = this;
				uni.chooseImage({
					count: 3 - self.imgsList.length,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 从相册，相机
					success: function(res) {
						let files = res.tempFilePaths;
						files.forEach((n, k) => {
							uni.showLoading({
								title: '正在上传...'
							});
							self.getFileUp(n, k == files.length - 1 ? true : false);
						})
					}
				});
			},
			getFileUp(e, s) {
				let self = this;
				uni.uploadFile({
					url: self.$api.upload,
					filePath: e,
					name: 'file',
					formData: {},
					success: (uploadFileRes) => {
						let result = JSON.parse(uploadFileRes.data);

						if (result.code === 20000) {
							self.imgsList.push(result.data.url);
							if (s) {
								getApp().getMsg('上传成功', 'success');
							}
						} else {
							getApp().getMsg(result.msg);
						}
					}
				});
			},
			getLook(imgsList, index) {
				getApp().getBigImg(imgsList, index);
			},
			getDelImg(index) {
				this.imgsList.splice(index, 1);
			},
			getSubmit() {
				if (this.formData.question.length < 10) return getApp().getMsg('请输入10字以上的描述');

				this.formData.images = this.imgsList.join();
				// 投诉建议
				if (this.type == 2) {
					this.$http.post(this.$api.opinion, this.formData).then(res => {
						getApp().getMsg('提交成功', 'success');
						getApp().getBack();
					})
				} else {
					let f_ = {
						id: this.id,
						reason: this.formData.question,
						image: this.formData.images
					}
					this.$http.post(this.$api.refund, f_).then(res => {
						getApp().getMsg('申请成功');
						getApp().getBack();
						uni.setStorageSync('orderUpRefund', true);
					})
				}
			}
		}
	}
</script>

<style lang="less">
	textarea {
		width: 100%;
		height: 300rpx;
		margin: 92rpx 0 20rpx;
	}

	.img_wrapper {
		width: 192rpx;
		height: 192rpx;
		border-radius: 16rpx;
		background-color: #F3F3F3;
		overflow: hidden;
		margin-right: 16rpx;
		position: relative;

		&.jia {
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.img {
			width: 100%;
			height: 100%;
		}

		.cha {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 16rpx;
			right: 16rpx;
		}
	}

	.p_btn {
		bottom: 0;
		left: 0;
		right: 0;
		position: fixed;
	}
</style>